<template>
	<view ref="globalInputRef">
		<!-- 密码输入框 -->
		<view class="input-wrapper" v-if="type === 'password'">
			<input type="text" @input="input" :disabled="inputDisabled" class="input" :password="showPassword"
				placeholder-class="placeholder-class" :placeholder="placeholder?placeholder:'请输入密码'"
				v-model="inputValue" />
			<i class="iconfont icon" :class="!showPassword?'icon-password_show':'icon-password_hide'"
				@click="changePassword" />
		</view>
		<!-- 验证码输入框 -->
		<view class="input-wrapper" v-else-if="type === 'code'">
			<input :maxlength="maxLength?maxLength:6" @input="input" placeholder-class="placeholder-class" class="input"
				type="number" :disabled="inputDisabled" placeholder="请输入验证码" />
			<g-vcode @start="vcodeStart" @change="vodeChange" @end="vcodeEnd" :seconds="seconds" :disabled="disabled"
				:id="id" ref="vcode" @clickvcode="clickvcode" v-model="inputValue" />
		</view>
		<!-- 手机号码输入框 -->
		<view class="input-wrapper" v-else-if="type === 'phone'">
			<input :maxlength="maxLength?maxLength:11" @input="input" placeholder-class="placeholder-class"
				class="input" type="number" v-model="inputValue" :disabled="inputDisabled"
				:placeholder="placeholder?placeholder:'请输入手机号码'" />
		</view>
		<!--下拉框 -->
		<view class="input-wrapper" v-else-if="type === 'select'">
			<uni-data-select :localdata="range" @change="selectChange" :placeholder="placeholder" :clear="false">
			</uni-data-select>
		</view>
		<!-- 带扫一扫的输入框 -->
		<view class="input-wrapper" v-else-if="type === 'scanCode'">
			<input :maxlength="maxLength" @input="input" placeholder-class="placeholder-class" class="input"
				:type="inputType" :placeholder="placeholder" ref="scancodeinput" :value="scanCodeValue"
				:disabled="inputDisabled" />
			<!-- #ifdef MP-WEIXIN -->
			<i class="iconfont icon-scan icon" @click="scanCode" />
			<!-- #endif -->
		</view>
		<!-- 其他类型输入框 -->
		<view class="input-wrapper" v-else-if="type === 'other'">
			<input :maxlength="maxLength" @input="input" placeholder-class="placeholder-class" class="input"
				:type="inputType" :placeholder="placeholder" :disabled="inputDisabled" v-model="inputValue" />
		</view>
		<view class="input-wrapper" v-else-if="type === 'picker'" style="overflow: hidden;">
			<input placeholder-class="placeholder-class" class="input" v-model="inputValue"
				:style="{'fontSize':inputValue.length>12?'24rpx':'32rpx'}" type="text" placeholder="请选择地址"
				@click="clickPickerInput" disabled />
			<uni-data-picker placeholder="请选择地址" popup-title="请选择城市" collection="opendb-city-china"
				field="code as value, name as text" orderby="value asc" :step-searh="true" self-field="code"
				parent-field="parent_code" @change="onchange" @nodeclick="onnodeclick" ref="picker"
				style="position: absolute;">
			</uni-data-picker>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		defineEmits,
		defineProps,
		toRefs,
		Ref,
		ref,
		defineExpose,
		onMounted,
		watch,
		getCurrentInstance,
		computed,
		reactive,
		watchEffect,
		nextTick,
	} from 'vue';
	import type { ILocation } from './types';
	const emit = defineEmits(['update:modelValue', 'start', 'end', 'change', 'clickvcode', 'scanCodeSuccess', 'scanCodeFail', 'onChange']);

	const vcode = ref(null);

	const globalInputRef = ref(null);


	const instance = getCurrentInstance();

	const inputValue : Ref<string> = ref('');




	const update = () => {
		inputValue.value = (instance?.attrs.modelValue as string);
	}

	const props = defineProps({
		modelValue: {
			type: String,
		},
		type: {
			type: String,
			default: 'password',
		},
		placeholder: {
			type: String,
		},
		seconds: {
			type: Number,
			default: 60,
		},
		maxLength: {
			type: Number,
		},
		inputType: {
			type: String
		},
		disabled: {
			type: Boolean,
			default: true,
		},
		id: {
			type: String
		},
		range: {
			type: Array,
		},
		value: {
			type: String
		},
		inputDisabled: {
			type: Boolean,
			default: false,
		}
	})
	const {
		type,
		placeholder,
		disabled,
	} = toRefs(props);

	watch(() => props.modelValue, (newValue) => {
		// console.log('watch')
		// console.log(newValue)
		inputValue.value = (newValue as string);
	},{
		immediate:true
	})




	//是否显示密码
	const showPassword : Ref<boolean> = ref(true);
	//改变密码显示状态
	const changePassword = () : void => {
		showPassword.value = !showPassword.value
	}



	const input = (e : any) => {
		emit('update:modelValue', e.detail.value);
	}


	const vcodeStart = () => {
		console.log(vcode.value)
		emit('start');
	}
	const vodeChange = (e : number) => {
		emit('change', e);
	}
	const vcodeEnd = () => {
		emit('end');
	}
	const clickvcode = () => {
		emit('clickvcode');
	}
	const changeStatus = () => {
		vcode.value.changeStatus();
	}

	const selectChange = (e : number) => {
		emit('update:modelValue', e);
	}

	let scanCodeValue : string;

	const scanCode = () => {
		uni.scanCode({
			success: (res) => {
				console.log(res.result)
				scanCodeValue = res.result;
				emit('scanCodeSuccess', res.result)
			},
			fail: () => {
				emit('scanCodeFail');
				// uni.prompt.$showToast('获取条形码内容失败')
			}
		});
	}

	const picker : Ref<any> = ref(null);





	const locationDetail : Ref<ILocation[]> = ref([]);


	const clickPickerInput = () => {
		picker.value.show();
	}


	const onchange = (e) => {
		locationDetail.value = e.detail.value;
		emit('onChange', locationDetail.value);
	};


	const onnodeclick = (node) => {
		// console.log('onnodeclick',node)
	}





	defineExpose({
		changeStatus,
		update
	})
</script>

<style scoped lang="scss">
	@import "./style.scss";
</style>